<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet" />
    <style>
    	.mui-input-row label {
    		width: 65%;
    	}
    	.mui-input-row label ~ input {
    		width: 35%;
    	}
    	.label.label-info {
    		border-radius: 50px;
    		color: #fff;
    		background-color: #30B497;
    	}
    	.label.label-info.unchoose {
    		color: #666;
    		background-color: #eee;
    	} 
    	.form-tags>input {
    		margin-top: 10px;
    		border: none;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">术中</h1>
	</header>
	<footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btn-commit" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">保&nbsp;&nbsp;存</button>
    </footer>
	
    <div class="mui-content oe-helper">
    	<form class="mui-input-group" id="list-input">
            <div class="mui-input-row">
                <label>受伤-手术时间(天)</label>
                <input type="text" name="case_mid_op_injured_op_time" placeholder="请填写" style="text-align: right;">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_mid_op_fix_mode" id="hid1" value="" />
					<a class="mui-navigate-right" href="#">固定方式</a>
					<div class="mui-collapse-content">
						<div id="tag-1" class="form-tags">
							<span class="label label-info unchoose">DHS内固定 </span>
							<span class="label label-info unchoose">空心钉 </span>
							<span class="label label-info unchoose">髓内钉PFNA </span>
							<span class="label label-info unchoose">外固定架</span>
							<span class="label label-info unchoose">髓内钉intertan</span>
							<span class="label label-info unchoose">半髋（骨水泥）</span>
							<span class="label label-info unchoose">半髋（非骨水泥）</span>
							<span class="label label-info unchoose">全髋（骨水泥）</span>
							<span class="label label-info unchoose">全髋（非骨水泥）</span>				
						</div>
					</div>
				</li>
            </ul>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_mid_op_anesthesia_method" id="hid2" value="" />
					<a class="mui-navigate-right" href="#">麻醉方式</a>
					<div class="mui-collapse-content">
						<div id="tag-2" class="form-tags">
							<span class="label label-info unchoose">椎管内麻醉 </span>
							<span class="label label-info unchoose">硬膜外麻醉 </span>
							<span class="label label-info unchoose">全麻 </span>
							<span class="label label-info unchoose">局麻</span>
							<span class="label label-info unchoose">腰硬联合</span>
							<span class="label label-info unchoose">神经阻滞麻醉</span>
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>出血量(ml)</label>
                <input type="text" name="case_mid_op_bleeding_amount" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>手术持续时间(小时)</label>
                <input type="text" name="case_mid_op_operation_duration" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>输血量(ml)</label>
                <input type="text" name="case_mid_op_blood_transfusion" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>特殊事件</label>
                <input type="text" name="case_mid_op_special_note" placeholder="请填写" style="text-align: right;">
            </div>
       </form>
    </div>
    
    <script id="tmp-list-input" type="text/html">
    	{{if data}}
    		 <div class="mui-input-row">
                <label>受伤-手术时间(天)</label>
                <input type="text" name="case_mid_op_injured_op_time" placeholder="请填写" style="text-align: right;" value="{{data.case_mid_op_injured_op_time}}">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_mid_op_fix_mode" id="hid1" value="{{data.case_mid_op_fix_mode}}" />
					<a class="mui-navigate-right" href="#">固定方式</a>
					<div class="mui-collapse-content">
						<div id="tag-1" class="form-tags">
							<span class="label label-info {{data.case_mid_op_fix_mode | match: 'DHS内固定'}}">DHS内固定 </span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '空心钉'}}">空心钉 </span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '髓内钉PFNA'}}">髓内钉PFNA </span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '外固定架'}}">外固定架</span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '髓内钉intertan'}}">髓内钉intertan</span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '半髋（骨水泥）'}}">半髋（骨水泥）</span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '半髋（非骨水泥）'}}">半髋（非骨水泥）</span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '全髋（骨水泥）'}}">全髋（骨水泥）</span>
							<span class="label label-info {{data.case_mid_op_fix_mode | match: '全髋（非骨水泥）'}}">全髋（非骨水泥）</span>		
							<input type="text" placeholder="自定义字段（多个字段请用逗号分隔）" name="case_mid_op_fix_mode_remark" value="{{data.case_mid_op_fix_mode_remark}}"/>
						</div>
					</div>
				</li>
            </ul>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_mid_op_anesthesia_method" id="hid2" value="{{data.case_mid_op_anesthesia_method}}" />
					<a class="mui-navigate-right" href="#">麻醉方式</a>
					<div class="mui-collapse-content">
						<div id="tag-2" class="form-tags">
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '椎管内麻醉'}}">椎管内麻醉 </span>
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '硬膜外麻醉'}}">硬膜外麻醉 </span>
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '全麻'}}">全麻 </span>
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '局麻'}}">局麻</span>
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '腰硬联合'}}">腰硬联合</span>
							<span class="label label-info {{data.case_mid_op_anesthesia_method | match: '神经阻滞麻醉'}}">神经阻滞麻醉</span>
							<input type="text" placeholder="自定义字段（多个字段请用逗号分隔）" name="case_mid_op_anesthesia_method_remark" value="{{data.case_mid_op_anesthesia_method_remark}}"/>
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>出血量(ml)</label>
                <input type="text" name="case_mid_op_bleeding_amount" placeholder="请填写" style="text-align: right;" value="{{data.case_mid_op_bleeding_amount}}">
            </div>
            <div class="mui-input-row">
                <label>手术持续时间(小时)</label>
                <input type="text" name="case_mid_op_operation_duration" placeholder="请填写" style="text-align: right;" value="{{data.case_mid_op_operation_duration}}">
            </div>
            <div class="mui-input-row">
                <label>输血量(ml)</label>
                <input type="text" name="case_mid_op_blood_transfusion" placeholder="请填写" style="text-align: right;" value="{{data.case_mid_op_blood_transfusion}}">
            </div>
            <div class="mui-input-row">
                <label>特殊事件</label>
                <input type="text" name="case_mid_op_special_note" placeholder="请填写" style="text-align: right;" value="{{data.case_mid_op_special_note}}">
            </div>
    	{{/if}}
    </script>

    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/lib/template.js"></script>
    <script src="../../../js/jquery-1.9.1.min.js"></script>
    <script src="../../../js/jquery.tags.min.js"></script>
    <script>
    	(function($, a){
    		template.helper('match', function(data, compareData){
				var reg = new RegExp(compareData);
				return data?(reg.test(data)?'':'unchoose'):'unchoose';
			});
    		
    		var wv,
    			caseId,
    			html,
    			tmpData,
    			commitData;
    			
//  		var hid1 = document.getElementById("hid1"),
//  			hid2 = document.getElementById("hid2");
    			
    		$('body').on('tap', '#btn-commit', function(){
    			commitData = app.form.getJsonFromForm('list-input');
    			commitData.case_id = caseId;
    			
    			CommitDataById(commitData);
    		});
    		
    		
    		setTimeout(function(){
    			$('#tag-2').on('tap', 'span', function(){
    			var self = this,
    				hid2 = document.getElementById("hid2");
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				hid2.value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				hid2.value = hid2.value.replace(self.textContent + ',' , '');
    			}
    		});
    		
    		// 受伤原因
    		$('#tag-1').on('tap', 'span', function(){
    			var self = this,
    				hid3 = document.getElementById("hid3");
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				hid1.value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				hid1.value = hid1.value.replace(self.textContent + ',' , '');
    			}
    		});
    		}, 1000);
    		
    		$.plusReady(function(){
    			wv = plus.webview.currentWebview();
    			caseId = wv.caseId;
    			type = wv.type;
				
				getCaseInfoById(caseId, type);
    		});
    		
    		var getCaseInfoById = function(caseId, type){
    			app.net.get('c_old_man_hip_broke_prj_case/show_by_type', {case_id: caseId, case_type: type}, function(data){
    				if(data && data.code === '100') {
    					tmpData = data;
    					html = template('tmp-list-input', tmpData);
    					document.getElementById("list-input").innerHTML = html
    				}
    			});
    		}
    		
    		var CommitDataById = function(commitData){
    			app.net.post('c_old_man_hip_broke_prj_case/update', commitData, function(data){
    				if(data && data.code === '100') {
    					$.toast('保存成功');
    					$.back();
    				}else {
    					$.toast('您尚未进行任何修改哦');
    				}
    			});
    		}
    		
    	}(mui, app));
    </script>
</body>
</html>